<style lang="less">
.page-templets{
    .main .main-form{
        width: 54%;
    }

    .text-help{
        margin: 0;
        font-size: 12px;
        line-height: 1;
        color: #B4B4B4;
    }

    .label-add{
        margin-top: 5px;
        border:1px #B4B4B4 solid;
    }
    .label-edit-header {
        padding: 10px;
        display: inline-block;
    }
    .label-edit-input {
        margin-left: 10px;
        width: 250px;
    }
    .keyword-button {
         margin: 5px;
    }
    .keyword-button-show:hover {
        background-color: #00dbff
    }
    .keyword-button-delete {
        top: -15px;
        position: relative;
        right: -20px;
        color: red;
    }
    
}
.confirm-btn {
    text-align: center;
    margin-top: 30px;
    margin-left: 50%
}

.confirm-span {
    text-align: center;
    margin-top: 30px;
    margin-left: 80%;
    font-size: 20px;
}
</style>
<template>
    <div class="main page-font">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/tickets' }">票券查询</el-breadcrumb-item>
                <el-breadcrumb-item>前台激活</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-form class="main-form" label-width="100px" :model="itemModel" @submit.native.prevent="addApply()">
            <el-form-item label="票券编号">
                <el-input v-model="itemModel.ticket_no" autofocus></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addApply">添加到列表</el-button>
            </el-form-item>
        </el-form>
        <el-table
            border
            :data="tickets"
            >
            <!-- <el-table-column label="票券大类" inline-template>
                <div>
                    {{row.grandpa.name}}
                </div>
            </el-table-column> -->
            <el-table-column label="票券类型" inline-template>
                <div>
                   {{row.parent.name}}
                </div>
            </el-table-column>
            <el-table-column label="客户" inline-template>
                <div>
                    {{row.customer ? row.customer.name : '-'}}
                </div>
            </el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column label="操作" inline-template>
                <div class="item-menus">
                    <el-button size="small" type="danger" @click="deleteItem(row)">删除</el-button>
                </div>
            </el-table-column>
        </el-table>
        <el-row>
            <el-button class="confirm-btn" :loading="loading" native-type="submit" type="primary" @click="confirmApply">提交激活</el-button>
        </el-row>
    </div>
</template>

<script>
import lodash from 'lodash';
import ItemController from '../controllers/item';

import Ticket from '../models/ticket';
import AttributeModel from '../models/attribute';
import TypeModel from '../models/type';
import CustomModel from '../models/customer';
import Apply from '../models/apply';


export default new ItemController({
    data() {
        return {
            itemModel: {
                ticket_no: '',
                end_time: new Date()
            },
            total: 0,
            tickets: [],
            loading: false,
        };
    },
    methods: {
        addApply() {
            for(let i = 0; i < this.tickets.length; i++) {
                if(this.tickets[i].ticket_no === this.itemModel.ticket_no) {
                    return;
                }
            }
            return Ticket.get({
                id: 0,
                ticket_no: this.itemModel.ticket_no,
                type: 'active'
            })
            .$promise
            .then(data => {
                this.itemModel.ticket_no = '';
                data.status = Ticket.UNUSED;
                data.end_time = this.end_time,
                this.tickets.push(data);
            })
            .catch(err => {
                this.itemModel.ticket_no = '';
            });
        },
        confirmApply() {
            this.$confirm('确认激活')
            .then(() => {
                return Ticket.update({
                    id: 0,
                    tickets: this.tickets,
                    status: Ticket.UNUSED,
                    start_time: new Date().getTime() / 1000,
                    end_time: this.end_time,
                    operation: '票券激活'
                })
                .$promise
                .then(data => {
                    this.tickets = [];
                })
                .catch(err => {
                    this.itemModel.ticket_no = '';
                });
            })
        },
        afterSave() {
            this.$message.success('保存成功');

            // this.$router.back();
        },
        deleteItem(row) {
            this.$confirm('确认移除该条')
            .then(() => {
                for(let i = 0; i < this.tickets.length; i++) {
                    if(this.tickets[i].id === row.id) {
                        if(this.tickets.length === 1) {
                            this.tickets = [];
                        }
                        else {
                            this.tickets.splice(i, 1);
                        }
                        break;
                    }       
                }
            });
        }
    },
    watch: {
        'itemModel.grand_id': {
            deep: true,
            handler(newVal, oladVal) {
                console.log(newVal, oladVal)
                return this.loadParents(newVal);
            }
        }
    }
});
</script>
